<template>
  <div class="app-container">
    <!-- bgColor="red" color="green"  -->
    <MyHeader title="这个斌斌真逊呐 的购物车"></MyHeader>
    <MyGoods :goods="item" v-for="item in list" :key="item.id"></MyGoods>
    <MyFooter :arr="list" @changeAll="allSum"></MyFooter>
  </div>
</template>

<script>
/* 
目标1:自定义头部-props限制条件
1.1:在MyHeader.vue中定义props,props是一个对象,加入限制条件
1.2:在子组件中使用定义的数据
1.3:在App.vue中给MyHeader.vue传入指定的数据

目标2:发送请求获取数据
2.1:下载axios导入main.js
2.2:配置基地址
2.3:将axios挂载到Vue的原型上
2.4:在App.vue的created中使用this.$axios发请求/api/cart

目标3:渲染数据
3.1:将获取到的数据保存到data中
3.2:使用v-for循环创建组件
3.3:将循环的商品对象传入子组件MyGoods.vue
3.4:子组件中渲染数据

目标4:勾选状态
4.1:在MyGoods.vue中将goods.goods_state与checkbox进行双向绑定
4.2:给checkbox动态绑定id为goods.id
4.3:给label动态绑定for为goods.id

目标5:数量处理
5.1:在MyGoods.vue中将goods传递给MyCount.vue
5.2:在MyCount.vue中使用v-model绑定数量给文本框
5.3:处理加号和减号按钮的自增自减
5.4:使用watch进行侦听处理越界的情况

目标6:全选功能
6.1:点击时获取选中状态
6.2:同步给每个小选框,小选框的选中状态又在数组里
6.3:把数组传给MyFooter后再更新
*/

import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    // console.log(this)
    // this.$axios.get('/api/cart')
    // .then(res => {
    //   console.log(res)
    // })
    let res = await this.$axios.get("/api/cart");
    this.list = res.data.list;
  },
  methods: {
    allSum(bool) {
      this.list.forEach((goods) => (goods.goods_state = bool));
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>